var productTabs = document.getElementById('productTabs');
var products = document.getElementById('products');
var page = document.getElementById('page');
var pageTotal = document.getElementById('pageTotal');

// 数据驱动渲染函数
function render(obj) {
    // 清空(初始化)
    products.innerHTML = '';
    page.innerHTML = '';
    pageTotal.innerHTML = '';

    if (obj.length > 6) {
        var len = 6;
    } else {
        var len = obj.length;
    }
    for (let i = 0; i < len; i++) {
        products.innerHTML += `<div class="product">
                                <div class="pic">
                                    <img src="${obj[i].image}" />
                                </div>
                                <a href="#">
                                    <div class="desc">
                                        ${obj[i].name}
                                    </div>
                                </a>
                            </div>`;
    }
    let num = obj.length;
    if (num > 6) {
        page.innerHTML = `<div id="page1" class="w cur">1</div>
                           <div id="page2" class="w">2</div>`;
    } else {
        page.innerHTML = `<div class="w cur">1</div>`;
    }
    pageTotal.innerHTML = `共${num}条`;
}

// 封装多页渲染函数 (这里是针对data3 的优化)
function pagesRender(obj) {
    // 两个页面的来回切换功能 (属于是优化页面)
    var page1 = document.getElementById('page1') || null;   // 短路思想
    var page2 = document.getElementById('page2') || null;
    // console.log(page2); => success

    if (page1) {
        page1.addEventListener('click', function() {
            // 清空(初始化)
            products.innerHTML = '';
            // page.innerHTML = '';
            pageTotal.innerHTML = '';

            for (i = 0; i < 6; i++) {
                products.innerHTML += `<div class="product">
                                    <div class="pic">
                                        <img src="${obj[i].image}" />
                                    </div>
                                    <a href="#">
                                        <div class="desc">
                                            ${obj[i].name}
                                        </div>
                                    </a>
                                </div>`;
            }
            let num = obj.length;
            // page.innerHTML = `<div id="page1" class="w cur">1</div>
            //                    <div id="page2" class="w">2</div>`;
            page2.classList.remove('cur');
            page1.classList.add('cur');
            pageTotal.innerHTML = `共${num}条`;
        });
    } else {}

    if (page2) {
        page2.addEventListener('click', function() {

            products.innerHTML = '';
            pageTotal.innerHTML = '';

            for (i = 6; i < obj.length; i++) {
                products.innerHTML += `<div class="product">
                                    <div class="pic">
                                        <img src="${obj[i].image}" />
                                    </div>
                                    <a href="#">
                                        <div class="desc">
                                            ${obj[i].name}
                                        </div>
                                    </a>
                                </div>`;
            }
            let num = obj.length;

            page1.classList.remove('cur');
            page2.classList.add('cur');
            pageTotal.innerHTML = `共${num}条`;
        });
    } else {}
}

// 排他函数
function expect(objs) {
    let obj = objs.children;
    for (let i = 0; i < obj.length; i++) {
        obj[i].classList.remove('cur');
    }
}


// 默认执行监听是否为data3 (即多页)
pagesRender(data3);

// 渲染产品对应页面
productTabs.addEventListener('click', function(e) {
    // console.log(e.target.id); => success
    // console.log(e.target.parentNode);

    if (e.target.id === '1') {
        render(data1);
        expect(productTabs);
        e.target.parentNode.classList.add('cur');
    } else if (e.target.id === '2') {
        render(data2);
        expect(productTabs);
        e.target.parentNode.classList.add('cur');
    } else if (e.target.id === '3') {
        render(data3);
        expect(productTabs);
        e.target.parentNode.classList.add('cur');
        pagesRender(data3);
    } else if (e.target.id === '4') {
        render(data4);
        expect(productTabs);
        e.target.parentNode.classList.add('cur');
    } else if (e.target.id === '5') {
        render(data5);
        expect(productTabs);
        e.target.parentNode.classList.add('cur');
    } else if (e.target.id === '6') {
        render(data6);
        expect(productTabs);
        e.target.parentNode.classList.add('cur');
    } else if (e.target.id === '7') {
        render(data7);
        expect(productTabs);
        e.target.parentNode.classList.add('cur');
    }
});
